<template>
  <div class="app-container">
    <!-- 主布局 -->
    <div class="main-layout">
      <!-- 左侧：用能单元树 -->
      <div class="left-panel">
        <EnergyUnitTree
          ref="energyUnitTreeRef"
          title="用能结构"
          :show-node-actions="false"
          :show-expand-toggle="true"
          :auto-select-first="true"
          @node-click="handleNodeClick"
        />
      </div>

      <!-- 右侧：环比分析内容 -->
      <div class="right-panel">
        <el-card class="main-card">
          <!-- 标题和筛选区域 -->
          <div class="header-section">
            <div class="title-section">
      <h2>环比分析</h2>
            </div>
            <div class="filter-content">
              <!-- 左侧时间选择区域 -->
              <div class="time-filter">
                <div class="time-type-tabs">
                  <el-button 
                    :type="queryParams.timeType === 'day' ? 'primary' : ''" 
                    @click="handleTimeTypeChange('day')"
                    class="time-tab"
                  >
                    日
                  </el-button>
                  <el-button 
                    :type="queryParams.timeType === 'month' ? 'primary' : ''" 
                    @click="handleTimeTypeChange('month')"
                    class="time-tab"
                  >
                    月
                  </el-button>
                  <el-button 
                    :type="queryParams.timeType === 'year' ? 'primary' : ''" 
                    @click="handleTimeTypeChange('year')"
                    class="time-tab"
                  >
                    年
                  </el-button>
                </div>
                <div class="time-picker">
                  <el-date-picker
                    v-model="queryParams.selectedTime"
                    :type="getDatePickerType()"
                    :format="getDateFormat()"
                    :value-format="getDateFormat()"
                    placeholder="选择时间"
                    @change="loadAnalysisData"
                    class="date-input"
                  />
                </div>
                  <el-select v-model="queryParams.energyType" @change="loadAnalysisData" class="energy-select">
                    <el-option
                      v-for="item in ENERGY_TYPE_OPTIONS"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
              </div>
              
              <!-- 右侧导出按钮 -->
              <div class="export-section">
                <el-button icon="Download" @click="exportData" :loading="exporting" class="export-btn">
                  导出
                </el-button>
              </div>
            </div>
    </div>
    
          <!-- 图表区域 -->
          <div class="chart-section">
            <div class="chart-content">
              <v-chart :option="chartOption" class="chart" v-loading="loading" />
            </div>
          </div>

          <!-- 数据表格区域 -->
          <div class="table-section">
            <el-table
              :data="tableData"
              v-loading="loading"
              stripe
              border
              style="margin-top: 20px; width: 99%;"
            >
              <el-table-column prop="period" label="本期时间" min-width="20%" align="center" />
              <el-table-column prop="currentConsumption" :label="`本期${currentEnergyInfo.label}消耗(${currentEnergyInfo.unit})`" min-width="20%" align="right">
                <template #default="scope">
                  <span>{{ formatNumber(scope.row.currentConsumption) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="lastPeriod" label="上期时间" min-width="20%" align="center" />
              <el-table-column prop="lastConsumption" :label="`上期${currentEnergyInfo.label}消耗(${currentEnergyInfo.unit})`" min-width="20%" align="right">
                <template #default="scope">
                  <span>{{ formatNumber(scope.row.lastConsumption) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" label="环比(%)" min-width="20%" align="right">
                <template #default="scope">
                  <span :class="scope.row.ratio >= 0 ? 'text-success' : 'text-danger'">
                    {{ scope.row.ratio >= 0 ? '+' : '' }}{{ scope.row.ratio }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </el-card>

  
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkPointComponent,
  MarkLineComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import EnergyUnitTree from '@/components/EnergyUnitTree/index.vue'
import { getHourlyStatisticsByGroupId } from '@/api/energy'
import { ENERGY_TYPE, ENERGY_TYPE_OPTIONS } from '@/utils/enums'

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkPointComponent,
  MarkLineComponent,
])

const { proxy } = getCurrentInstance()

// 响应式数据
const energyUnitTreeRef = ref(null)
const loading = ref(false)
const exporting = ref(false)
const selectedNode = ref(null)
const tableData = ref([])
const chartOption = ref({
  tooltip: {
    show: true
  },
  legend: {
    data: []
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: []
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: []
})

// 查询参数
const queryParams = reactive({
  timeType: 'month', // day, month 或 year
  selectedTime: new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0'), // 默认当前月
  groupId: null,
  energyType: ENERGY_TYPE.ELECTRIC // 默认选择电
})

// 计算属性：获取当前能源类型信息
const currentEnergyInfo = computed(() => {
  const energyOption = ENERGY_TYPE_OPTIONS.find(item => item.value === queryParams.energyType)
  return energyOption || { label: '能源', unit: '' }
})

// 处理用能单元节点点击
function handleNodeClick(node) {
  selectedNode.value = node
  queryParams.groupId = node.groupId
  loadAnalysisData()
}

// 处理时间类型变化
function handleTimeTypeChange(type) {
  queryParams.timeType = type
  const now = new Date()
  
  if (type === 'day') {
    queryParams.selectedTime = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0')
  } else if (type === 'month') {
    queryParams.selectedTime = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
  } else {
    queryParams.selectedTime = String(now.getFullYear())
  }
  
  if (selectedNode.value) {
    loadAnalysisData()
  }
}

// 获取日期选择器类型
function getDatePickerType() {
  switch (queryParams.timeType) {
    case 'day':
      return 'date'
    case 'month':
      return 'month'
    case 'year':
      return 'year'
    default:
      return 'month'
  }
}

// 获取日期格式
function getDateFormat() {
  switch (queryParams.timeType) {
    case 'day':
      return 'YYYY-MM-DD'
    case 'month':
      return 'YYYY-MM'
    case 'year':
      return 'YYYY'
    default:
      return 'YYYY-MM'
  }
}

// 加载分析数据
async function loadAnalysisData() {
  if (!selectedNode.value) {
    proxy?.$modal?.msgWarning?.('请先选择用能单元')
    return
  }

  loading.value = true
  try {
    const params = {
      statTime: queryParams.selectedTime,
      groupId: queryParams.groupId,
      energyType: queryParams.energyType
    }
    
    console.log('调用环比分析接口，参数:', params)
    
    const response = await getHourlyStatisticsByGroupId(params)
    
    console.log('环比分析接口返回数据:', response)
    
    if (response && response.code === 200 && response.data) {
      // 处理返回的数据
      const processedData = processApiData(response.data)
      
      // 更新图表和表格
      updateChart(processedData.chartData)
      tableData.value = processedData.tableData
    } else {
      proxy?.$modal?.msgWarning?.('未获取到数据')
      // 清空图表和表格
      updateChart({ categories: [], currentData: [], lastData: [], ratioData: [] })
      tableData.value = []
    }
    
  } catch (error) {
    console.error('加载环比分析数据失败:', error)
    proxy?.$modal?.msgError?.('加载数据失败')
    // 清空图表和表格
    updateChart({ categories: [], currentData: [], lastData: [], ratioData: [] })
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 处理API返回的数据
function processApiData(data) {
  const timeType = queryParams.timeType
  
  let chartData = {
    categories: [],
    currentData: [],
    lastData: [],
    ratioData: []
  }
  
  let tableDataList = []
  
  // 检查数据是否存在
  if (!data || typeof data !== 'object') {
    return {
      chartData: chartData,
      tableData: tableDataList
    }
  }
  
  // 获取当期数据和上期数据（环比）
  const dayData = data.dayData || []
  const beforedayData = data.beforedayData || []
  
  // 处理当期数据
  dayData.forEach((item, index) => {
    const hourName = item.hourName || ''
    let categoryLabel = ''
    let currentPeriod = hourName
    
    // 根据时间类型生成标签
    if (timeType === 'day') {
      // 日数据：按小时显示
      const parts = hourName.split(' ')
      if (parts.length > 1) {
        categoryLabel = parts[1].split(':')[0] + '时'
      } else {
        categoryLabel = hourName
      }
    } else if (timeType === 'month') {
      // 月数据：按日显示
      const parts = hourName.split('-')
      if (parts.length >= 3) {
        categoryLabel = parts[2] + '日'
      } else {
        categoryLabel = hourName
      }
    } else {
      // 年数据：按月显示
      const parts = hourName.split('-')
      if (parts.length >= 2) {
        categoryLabel = parts[1] + '月'
      } else {
        categoryLabel = hourName
      }
    }
    
    const currentConsumption = item.sum_value || 0
    
    // 从 beforedayData 中获取对应索引的上期数据
    // API 返回的 beforedayData 和 dayData 是一一对应的
    const lastItem = beforedayData[index]
    const lastConsumption = lastItem ? (lastItem.sum_value || 0) : 0
    const lastPeriod = lastItem ? (lastItem.hourName || '') : ''
    
    // 计算环比比率
    let ratio = 0
    if (lastConsumption !== 0) {
      ratio = ((currentConsumption - lastConsumption) / lastConsumption * 100).toFixed(1)
    } else if (currentConsumption !== 0) {
      ratio = 100
    }
    
    chartData.categories.push(categoryLabel)
    chartData.currentData.push(parseFloat(currentConsumption.toFixed(2)))
    chartData.lastData.push(parseFloat(lastConsumption.toFixed(2)))
    chartData.ratioData.push(parseFloat(ratio))
    
    tableDataList.push({
      period: currentPeriod,
      currentConsumption: currentConsumption.toFixed(2),
      lastPeriod: lastPeriod,
      lastConsumption: lastConsumption.toFixed(2),
      ratio: ratio
    })
  })
  
  return {
    chartData: chartData,
    tableData: tableDataList
  }
}

// 生成模拟数据
function generateMockData() {
  const timeType = queryParams.timeType
  const currentTime = queryParams.selectedTime
  
  let chartData = {
    categories: [],
    currentData: [],
    lastYearData: [],
    ratioData: []
  }
  
  let tableDataList = []
  
  if (timeType === 'day') {
    // 日数据：生成当天每小时的数据
    const [year, month, day] = currentTime.split('-')
    
    for (let hour = 0; hour <= 23; hour++) {
      const currentPeriod = `${year}-${month}-${day} ${String(hour).padStart(2, '0')}:00`
      const lastYearPeriod = `${year - 1}-${month}-${day} ${String(hour).padStart(2, '0')}:00`
      
      const currentConsumption = Math.random() * 150 + 10
      const lastYearConsumption = Math.random() * 150 + 10
      const ratio = ((currentConsumption - lastYearConsumption) / lastYearConsumption * 100).toFixed(1)
      
      chartData.categories.push(`${String(hour).padStart(2, '0')}时`)
      chartData.currentData.push(currentConsumption.toFixed(1))
      chartData.lastYearData.push(lastYearConsumption.toFixed(1))
      chartData.ratioData.push(parseFloat(ratio))
      
      tableDataList.push({
        period: currentPeriod,
        currentConsumption: currentConsumption.toFixed(1),
        lastYearPeriod: lastYearPeriod,
        lastYearConsumption: lastYearConsumption.toFixed(1),
        ratio: ratio
      })
    }
  } else if (timeType === 'month') {
    // 月度数据：生成当月每天的数据
    const [year, month] = currentTime.split('-')
    const daysInMonth = new Date(year, month, 0).getDate()
    
    for (let day = 1; day <= daysInMonth; day++) {
      const currentPeriod = `${year}-${month}-${String(day).padStart(2, '0')}`
      const lastYearPeriod = `${year - 1}-${month}-${String(day).padStart(2, '0')}`
      
      const currentConsumption = Math.random() * 15000 + 5000
      const lastYearConsumption = Math.random() * 15000 + 5000
      const ratio = ((currentConsumption - lastYearConsumption) / lastYearConsumption * 100).toFixed(1)
      
      chartData.categories.push(`${String(day).padStart(2, '0')}日`)
      chartData.currentData.push(currentConsumption.toFixed(1))
      chartData.lastYearData.push(lastYearConsumption.toFixed(1))
      chartData.ratioData.push(parseFloat(ratio))
      
      tableDataList.push({
        period: currentPeriod,
        currentConsumption: currentConsumption.toFixed(1),
        lastYearPeriod: lastYearPeriod,
        lastYearConsumption: lastYearConsumption.toFixed(1),
        ratio: ratio
      })
    }
  } else {
    // 年度数据：生成当年每月的数据
    const year = parseInt(currentTime)
    
    for (let month = 1; month <= 12; month++) {
      const currentPeriod = `${year}-${String(month).padStart(2, '0')}`
      const lastYearPeriod = `${year - 1}-${String(month).padStart(2, '0')}`
      
      const currentConsumption = Math.random() * 150000 + 50000
      const lastYearConsumption = Math.random() * 150000 + 50000
      const ratio = ((currentConsumption - lastYearConsumption) / lastYearConsumption * 100).toFixed(1)
      
      chartData.categories.push(`${String(month).padStart(2, '0')}月`)
      chartData.currentData.push(currentConsumption.toFixed(1))
      chartData.lastYearData.push(lastYearConsumption.toFixed(1))
      chartData.ratioData.push(parseFloat(ratio))
      
      tableDataList.push({
        period: currentPeriod,
        currentConsumption: currentConsumption.toFixed(1),
        lastYearPeriod: lastYearPeriod,
        lastYearConsumption: lastYearConsumption.toFixed(1),
        ratio: ratio
      })
    }
  }
  
  return {
    chartData: chartData,
    tableData: tableDataList
  }
}

// 更新图表
function updateChart(data) {
  // 数据验证和默认值处理
  const safeData = {
    categories: Array.isArray(data?.categories) ? data.categories : [],
    currentData: Array.isArray(data?.currentData) ? data.currentData.map(v => Number(v) || 0) : [],
    lastData: Array.isArray(data?.lastData) ? data.lastData.map(v => Number(v) || 0) : [],
    ratioData: Array.isArray(data?.ratioData) ? data.ratioData.map(v => Number(v) || 0) : []
  }
  
  // 获取当前能源单位
  const energyUnit = currentEnergyInfo.value?.unit || ''
  
  chartOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#ccc',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(150,150,150,0.1)'
        }
      },
      formatter: (params) => {
        if (!params || !Array.isArray(params) || params.length === 0) return ''
        
        let html = `<div><strong>${params[0].name}</strong></div>`
        
        params.forEach(p => {
          if (p.seriesName === '环比') {
            html += `<div>${p.marker || '●'} ${p.seriesName}: ${p.value}%</div>`
          } else {
            const val = Number(p.value || 0).toFixed(2)
            html += `<div>${p.marker || '●'} ${p.seriesName}: ${val} ${energyUnit}</div>`
          }
        })
        
        return html
      }
    },
    legend: {
      data: ['本期消耗', '上期消耗', '环比'],
      right: 20,
      top: 10,
      orient: 'horizontal'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: safeData.categories,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: `${currentEnergyInfo.value.label}消耗环比(单位: ${energyUnit})`,
        position: 'left',
        min: 0,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '本期消耗',
        type: 'bar',
        data: safeData.currentData,
        barWidth: '60%',
        itemStyle: {
          color: '#4fdaca',
          borderColor: '#4fdaca',
          borderWidth: 1,
          borderRadius: [2, 2, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#32b7cb'
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            return Number(params.value || 0).toFixed(2)
          },
          fontSize: 11,
          color: '#333'
        }
      },
      {
        name: '上期消耗',
        type: 'bar',
        data: safeData.lastData,
        barWidth: '60%',
        itemStyle: {
          color: '#409EFF',
          borderColor: '#409EFF',
          borderWidth: 1,
          borderRadius: [2, 2, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#337ecc'
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            return Number(params.value || 0).toFixed(2)
          },
          fontSize: 11,
          color: '#333'
        }
      },
      {
        name: '环比',
        type: 'line',
        data: safeData.ratioData,
        yAxisIndex: 0,
        itemStyle: {
          color: '#E6A23C',
          borderColor: '#E6A23C',
          borderWidth: 2
        },
        lineStyle: {
          color: '#E6A23C',
          width: 3,
          type: 'solid'
        },
        symbol: 'circle',
        symbolSize: 6,
        emphasis: {
          itemStyle: {
            color: '#cf9236'
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            return (params.value || 0) + '%'
          },
          fontSize: 11,
          color: '#E6A23C',
          fontWeight: 'bold'
        }
      }
    ]
  }
}

// 格式化数字
function formatNumber(value) {
  if (!value) return '0'
  return parseFloat(value).toLocaleString()
}

// 导出数据
async function exportData() {
  if (!selectedNode.value) {
    proxy?.$modal?.msgWarning?.('请先选择用能单元')
    return
  }
  
  exporting.value = true
  try {
    const params = {
      groupId: queryParams.groupId,
      timeType: queryParams.timeType,
      selectedTime: queryParams.selectedTime,
      energyType: queryParams.energyType
    }
    
    // await exportYearOverYearData(params)
    // 模拟导出功能
    console.log('导出参数:', params)
    proxy?.$modal?.msgSuccess?.('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    proxy?.$modal?.msgError?.('导出失败')
  } finally {
    exporting.value = false
  }
}


// 页面初始化
onMounted(() => {
  // 图表会在选择用能单元后初始化
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #F1F2F5;
  min-height: 100vh;
}

// 主布局样式
.main-layout {
  display: flex;
  gap: 20px;
  height: calc(100vh - 140px);
  box-sizing: border-box;
}

// 左侧面板样式
.left-panel {
  flex: 0 0 400px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
}

// 右侧面板样式
.right-panel {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  
  .main-card {
    min-height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    
    // 头部区域样式
    .header-section {
      flex: 0 0 auto;
      padding: 20px 20px 0 20px;
      
      .title-section {
  margin-bottom: 20px;
  
  h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
        }
      }
      
      .filter-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #e4e7ed;
        
        .time-filter {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .time-type-tabs {
            display: flex;
            gap: 0;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            overflow: hidden;
            
            .time-tab {
              border: none;
              border-radius: 0;
              min-width: 50px;
              height: 32px;
              font-size: 14px;
              background: #ffffff;
              color: #606266;
              
              &:not(:last-child) {
                border-right: 1px solid #dcdfe6;
              }
              
              &.el-button--primary {
                background: #4fdaca;
                color: white;
                border-color: #4fdaca;
              }
              
              &:hover:not(.el-button--primary) {
                background: #f5f7fa;
              }
            }
          }
          
          .time-picker {
            .date-input {
              width: 160px;
            }
          }
          
          .energy-select {
            width: 100px;
            height: 32px;
          }
        }
        
        .export-section {
          .export-btn {
            border-radius: 6px;
            height: 32px;
          }
        }
      }
    }
    
    // 图表区域样式
    .chart-section {
      flex: 0 0 auto;
      
      .chart-content {
        height: 400px;
        margin-top: 20px;
        position: relative;
        
        .chart {
          width: 100%;
          height: 100%;
          min-height: 400px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }
      }
    }
    
    // 表格区域样式
    .table-section {
      flex: 0 0 auto;
      padding: 0 20px 20px 20px;
      
      .text-success {
        color: #67C23A;
        font-weight: 500;
      }
      
      .text-danger {
        color: #F56C6C;
        font-weight: 500;
      }
      
      // 移除表格阴影和圆角
      :deep(.el-table) {
        box-shadow: none !important;
        border-radius: 0 !important;
        
        .el-table__header-wrapper {
          border-radius: 0 !important;
        }
        
        .el-table__body-wrapper {
          border-radius: 0 !important;
          max-height: none !important;
          overflow: visible !important;
        }
      }
    }
  }
}


// Element Plus 组件样式覆盖
:deep(.el-card__header) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.el-table) {
  .el-table__header {
    background: #f8f9fa;
    
    th {
      background: #f8f9fa !important;
      color: #2c3e50;
    font-weight: 600;
    }
  }
  
  .el-table__row {
    &:hover > td {
      background-color: #f5f7fa !important;
    }
  }
}

:deep(.el-form-item__label) {
  color: #2c3e50;
  font-weight: 500;
}

:deep(.el-select) {
  .el-select__wrapper {
    border-radius: 6px;
    
    &:hover {
      border-color: #4fdaca;
    }
    
    &.is-focused {
      border-color: #4fdaca;
      box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
    }
  }
}

:deep(.el-date-editor) {
  .el-input__wrapper {
    border-radius: 6px;
    
    &:hover {
      border-color: #4fdaca;
    }
    
    &.is-focus {
      border-color: #4fdaca;
      box-shadow: 0 0 0 2px rgba(79, 218, 202, 0.2);
    }
  }
}

:deep(.el-button) {
  border-radius: 6px;
  
  &.el-button--primary {
    background: linear-gradient(135deg, #4fdaca 0%, #32b7cb 100%);
    border-color: #4fdaca;
    
    &:hover {
      background: linear-gradient(135deg, #32b7cb 0%, #4fdaca 100%);
    }
  }
}

// 时间类型按钮组特殊样式
.time-type-tabs {
  :deep(.el-button) {
    border-radius: 0 !important;
    border: none !important;
    
    &.time-tab {
      background: #ffffff !important;
      color: #606266 !important;
      
      &.el-button--primary {
        background: #4fdaca !important;
        color: white !important;
      }
      
      &:hover:not(.el-button--primary) {
        background: #f5f7fa !important;
      }
      
      &:focus {
        outline: none;
        box-shadow: none;
      }
    }
  }
}
</style>
